import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Table, Row, Col, Button } from 'antd';
import { hashHistory } from 'react-router';

import {
	getListNodes,
	getTopology
} from '../../action';

class NodesList extends Component {
	constructor(props) {
		super(props);
		this.columns = [
			{ title: '节点名称', dataIndex: 'label', key: 'label' },
			{ title: '引用数据源', dataIndex: 'source_name', key: 'source_name' },
			{ title: '操作', dataIndex: '', className: 'center-col', key: 'action', render: this.renderAction }
		];
		this.state = {}
	}
	componentDidMount() {
		this.props.dispatch(getListNodes());
		this.props.dispatch(getTopology());
	}
	addNode = () => {
		hashHistory.push('/nodecreator');
	}
	editNode = (record) => {
		hashHistory.push(`/nodeeditor/${record.id}`);
	}
	nodeView = (record) => {
		hashHistory.push(`/nodeview/${record.id}`);
	}
	renderAction = (text, record) => {
		return (
			<div>
				<span style={{color: '#2baee9', cursor: 'pointer'}} onClick={this.editNode.bind(null, record)}>编辑</span>
				<span style={{color: '#2baee9', cursor: 'pointer'}} onClick={this.nodeView.bind(null, record)}> | 查看</span>
			</div>
		)
	}
	render() {
		const { createdNodesList } = this.props;
		const columns = this.columns;
		// const dataSource = [{key: 1, nodeName: '银行卡号', source: 'creditcard.csv'}];
		console.log('createdNodesList: ', createdNodesList);
		const dataSource = createdNodesList.map((item, index) => Object.assign(item, {key: item.id}))
		return (
			<div style={{margin: '0px 20px'}}>
				<Row style={{margin: '10px 0px', height: 60, borderBottom: '1px solid #eee'}}>
					<span style={{fontSize: 18, position: 'relative', top: 12}}>已添加节点</span>
					<Button className="reedsec_btn" type="primary" size="large" onClick={this.addNode}>新增</Button>
				</Row>
				<Row>
					<Table className="reedsec_table" columns={columns} dataSource={dataSource} pagination={false}/>
				</Row>
			</div>
		)
	}
}

function mapState2Props(state) {
	let { graphData: {relationships, nodes, createdNodesList} } = state;
	return { relationships, nodes, createdNodesList };
}

NodesList = connect(mapState2Props)(NodesList);

export default NodesList;
